<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/babel">
    var MessageBox = React.createClass({
        getInitialState: function () {
            return {
                isVisible: true,
                subMessages: [
                    '我会代码搬砖',
                    '以及花式搬砖',
                    '不说了，工头叫我回去搬砖了。。。。。。',
                ]
            }
        },
        render: function () {

            return (
                    <div>
                        <h1>{this.props.title}</h1>
                        {/* 
                        1.如果messages要参数不传数据的时候会发生什么？ 
                        2.如果messages传递进去一个字符串的时候会是怎么样？或者传递的是对象呢？
                        所以，我们在子组件中需要getDefaultProps以及propTypes进行初始化及验证操作。
                        查看更多的propTypes:
                        https://facebook.github.io/react/docs/typechecking-with-proptypes.html
                        */}
                        <Submessage messages={this.state.subMessages} />
                    </div>
            )
        }
    });

    var Submessage = React.createClass({
        propTypes: {
            messages: React.PropTypes.array.isRequired,
        },
        getDefaultProps: function () {
            return {
                messages: ['默认的子消息'],
            }
        },
        render: function () {
            var msgs = [];
            this.props.messages.forEach(function (msg, index) {
                msgs.push(<p>码农说：{msg}</p>
                )
            });

            return (
                    <div>{msgs}</div>
            )
        }
    });

    var title = '你好世界（来自props哦）';

    var messageBox = ReactDOM.render(<MessageBox title={title}/>,
            document.getElementById('app')
    )


</script>
</body>
</html>